<template>
    <view class="content">
        <show-modal></show-modal>
        <!-- <navigation-custom :config="config" @customSearch="customSearch" :scrollTop="scrollTop"
            :scrollMaxHeight="scrollMaxHeight" /> -->

        <view @click="customSearch" class="navigation-bar-custom-capsule" style="width: '70%'">
            <view class="cu-bar search bg-transparent" style="width: 100%;">
                <view class="search-form round bg-transparent">
                    <text class="cuIcon-search"></text>
                    <input :adjust-position="false" type="text" placeholder="搜索图片、文章、视频"
                        confirm-type="search"></input>
                </view>
            </view>
        </view>
        
        <swiper class="card-swiper" :indicator-dots="false" :circular="true" :autoplay="false" interval="1000"
            duration="100" @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
            <swiper-item v-for="(item,index) in swiperList" :key="index" :data-index="index"
                :class="cardCur==index?'cur':''" @click="swiperChoose">
                <view class="swiper-item">
                    <image :src="item.pic" mode="aspectFill"></image>
                    <view class="title box-shadow">{{item.name}}</view>
                    <view class="user box-shadow">
                        <image class="user-avatar" mode="aspectFill" :src="item.avatar"></image>
                        {{item.nickname}}
                    </view>
                </view>
            </swiper-item>
        </swiper>

        <view class="text-center text-xxl text-bold">编辑精选</view>
        <view class="con">
            <i></i>
            <p>SELECT</p>
        </view>

        <waterfall-flow :list="list" :loading="loading" @click="choose"></waterfall-flow>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 导航配置
                config: {
                    title: "我是标题", //title
                    type: 5, //type 1，3胶囊 2，4无胶囊模式
                    // bgcolor: "#c1a379", //背景颜色
                    transparent: true, //是否背景透明 默认白色
                    linear: true, //是为开启下滑渐变
                },
                scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
                scrollMaxHeight: 200, //滑动的高度限制，超过这个高度即背景全部显示

                // 卡片配置
                cardCur: 0,
                swiperList: [],

                // 瀑布流配置
                page: 2,
                total: 1,
                list: [], // 列表
                loading: true,
            }
        },
        onPageScroll(e) {
            // 这里不会被触发，需要使用父子组件调用
            this.scrollTop = e.scrollTop;
        },
        onReady() {
            uni.setNavigationBarTitle({
                title: ''
            })
            uni.setNavigationBarColor({
                frontColor: '#FFF',
                backgroundColor: '#FFF'
            })
        },
        mounted() {
            console.log('home mounted')
            this.getSwiper();
            this.getList();
        },
        methods: {
            //当config type 为 5 的时候 自定义methods
            customSearch() {
                uni.navigateTo({
                    url: "/pages/home/search"
                })
            },
            // cardSwiper
            cardSwiper(e) {
                console.log("@change=cardSwiper");
                this.cardCur = e.detail.current
            },

            swiperChoose(e) {
                let index = e.currentTarget.dataset.index;
                this.choose(this.swiperList[index]);
            },
            // 瀑布流 选中
            choose(item) {
                // item 返回选中 JSON 对象
                console.log(item)
                uni.navigateTo({
                    url: "/pages/home/detail?id=" + item.id
                })
            },
            reachBottom() {
                console.log('home onReachBottom')
                if (this.loading) return
                this.page++;
                this.loading = true;
                this.getList();
            },
            getSwiper() {
                this.loading = true
                let data = {
                    "currPage": 1,
                    "pageSize": 10,
                    "entity": {
                        "searchKeyword": ""
                    }
                }
                this.$api.searchBook(data).then((res) => {
                    this.loading = false;
                    this.swiperList = res.data.records
                }).catch((err) => {
                    this.loading = false;
                    console.error('request fail', err);
                })
            },
            // 瀑布流 模拟加载数据
            getList() {
                if (this.list.length < this.total) {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = true
                        let data = {
                            "currPage": this.page,
                            "pageSize": 10,
                            "entity": {
                                "searchKeyword": ""
                            }
                        }
                        this.$api.searchBook(data).then((res) => {
                            // 延迟 120 毫秒隐藏加载动画，为了跟组件里面的 100 毫秒定位有个平缓过度
                            setTimeout(() => {
                                this.loading = false;
                            }, 120);
                            this.total = res.data.totalCount;
                            if (res.data.records != null) {
                                this.list = this.list.concat(res.data.records);
                            }
                        }).catch((err) => {
                            // 延迟 120 毫秒隐藏加载动画，为了跟组件里面的 100 毫秒定位有个平缓过度
                            setTimeout(() => {
                                this.loading = false;
                            }, 120);
                            console.error('request fail', err);
                        })
                    }, 500)
                } else {
                    this.loading = false;
                }
            }
        }
    }
</script>

<style lang="less">
    .content {
        margin-bottom: 200rpx;
    }

    // 横线到底了
    .con {
        position: relative;
        height: 5rpx;
        line-height: 5rpx;
        margin: 30rpx auto;
        text-align: center;

        p {
            display: inline-block;
            font-size: 20rpx;
            color: #c1c1c1;
            background: #FFFFFF;
            padding: 0 20rpx;
            text-align: center;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        i {
            display: block;
            height: 1rpx;
            background: #e1e1e1;
            position: absolute;
            top: 5rpx;
            width: 100%;
        }
    }

    // swiper 
    .swiper-item image,
    .swiper-item video {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .card-swiper {
        height: 776rpx !important;
    }

    // 卡片通用
    .card-swiper swiper-item {
        width: 414rpx !important;
        left: 70rpx;
        box-sizing: border-box;
        padding: 30rpx 0rpx 30rpx;
        overflow: inherit;

        .title,
        .user {
            position: absolute;
            color: #FFFFFF;
            font-weight: bold;
            margin-left: 30rpx;
        }

        .title {
            font-size: 40rpx;
            bottom: 120rpx;
        }

        .user {
            font-size: 24rpx;
            bottom: 50rpx;
            vertical-align: middle;
        }

        .user-avatar {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            // 控制图片和文字在同一行显示且对齐
            display: inline-block;
            vertical-align: middle;
            margin-right: 10rpx;
        }
    }

    // 隔壁其他卡片
    .card-swiper swiper-item .swiper-item {
        display: block;
        height: 100%;
        border-radius: 30rpx;
        transform: scale(0.9);
        transition: all 0.2s ease-in 0s;
        -webkit-transform: scale(0.9);
        -webkit-transition: all 0.2s ease-in 0s;
        overflow: hidden;
    }

    .card-swiper swiper-item.cur .swiper-item {
        transform: none !important;
        transition: all 0.2s ease-in 0s;
        -webkit-transform: none !important;
        -webkit-transition: all 0.2s ease-in 0s;
    }

    .card-swiper .swiper-item .title,
    .card-swiper .swiper-item .user {
        color: #FFF;
        text-shadow: 5px 2px 6px #e54d42;
    }
</style>
